<template>
  <section class="msgcontent">
    <scroll class="msgcontent-scroll">
      <div class="msgcontent-scroll-content">
        <ul class="content">
          <li class="item">
            <div class="left">订单号</div>
            <div class="right">{{item._id}}</div>
          </li>
          <li class="item">
            <div class="left">订单状态</div>
            <div class="right">待体检</div>
          </li>
        </ul>
        <ul class="content">
          <li class="item">
            <div class="left">预约医院</div>
            <div class="right">{{item.organization}}</div>
          </li>
          <li class="item">
            <div class="left">预约科室</div>
            <div class="right">{{item.organization}}</div>
          </li>
          <li class="item">
            <div class="left">预约医生</div>
            <div class="right">无</div>
          </li>
          <li class="item">
            <div class="left">就诊日期</div>
            <div class="right">待就诊</div>
          </li>
          <li class="item">
            <div class="left">就诊时间</div>
            <div class="right">1235545</div>
          </li>
          <li class="item">
            <div class="left">取号时间</div>
            <div class="right">待就诊</div>
          </li>
          <li class="item">
            <div class="left">就诊时间</div>
            <div class="right">1235545</div>
          </li>
          <li class="item">
            <div class="left">退号截止时间</div>
            <div class="right">付费类型</div>
          </li>
        </ul>
        <ul class="content">
          <li class="item">
            <div class="left">就诊人</div>
            <div class="right">{{item.patient}}</div>
          </li>
          <li class="item">
            <div class="left">身份证</div>
            <div class="right"></div>
          </li>
          <li class="item">
            <div class="left">手机号码</div>
            <div class="right">待就诊</div>
          </li>
        </ul>
        <div class="description">
          <div class="header">订单备注</div>
          <div class="desContent">
            {{item.patient}}成功预约{{item.ordertime | formatTime('yyyy-MM-dd hh:mm')}}{{item.organization}}{{item.project}}项目，
            预约项目号为{{item.projectId}}，取号时间为就诊当天早上8到下午3点，请于取号时间段凭二代身份证原件、
            （14岁一下儿童可带户口本原件，外籍人士出示护照，港澳台人员出示身份证件或回乡证）到一楼大厅云之家服务台取预约号，超过取
            号时间段预约号将自动取消，号源作废，并视为违约一次。若无法如期取号，请于就诊前一天下午16:00前致电******、登录云之家网站操作退号、
            未操作退号的患者，就诊当天不退预约费。
          </div>
        </div>
        <div class="msgBtn" @click="_delOrder">
          取消预约
        </div>
      </div>
    </scroll>
    <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
  </section>
</template>

<script>
    import TopBar from "../../components/top-bar/top-bar";
    import Scroll from "../../components/scroll/scroll";
    import {ERR_OK} from "../../api/config";
    import {delOrder} from "../../api/ajax";
    import ErrorTip from "../../components/errorTip/errorTip";

    export default {
      components: {
        ErrorTip,
        Scroll,
        TopBar},
      name: "msg-content",
      props: {
        item: {
          type: Object,
          default: null
        }
      },
      data () {
        return {
          dialog: false,
          alertText: ''
        }
      },
      mounted () {
        console.log(this.item)
      },
      methods: {
        _delOrder () {
          delOrder(this.item._id).then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.alertText = response.msg
              this.dialog = true
              setTimeout(() => {
                this.$router.push('/home')
              }, 1000)
            } else {
              this.alertText = response.msg
              this.dialog = true
              setTimeout(() => {
                this.alertText = ''
                this.dialog = false
              }, 1000)
            }
          }).catch((err) => {
            console.log(err)
            this.alertText = '请检查网路'
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .msgcontent{
    position: absolute;
    top: 0;
    z-index: 1000;
    height: 100%;
    width: 100vw;
    background-color: $bc;
    .msgcontent-scroll{
      overflow: hidden;
      height: 100%;
      .msgcontent-scroll-content{
        padding-bottom: 60px;
        .content{
          margin-top: 18px;
          background-color: #ffffff;
          .item{
            margin-left: 18px;
            padding-right: 18px;
            line-height: 80px;
            display: flex;
            border-bottom: 1px solid #f2f2f2;
            @include font-dpr(28px);
            .left{
              color: #3a3a3a;
              flex: 1;
            }
            .right{
              color: #616161;
            }
            &:last-child{
              border: none;
            }
          }
        }
        .description{
          color: #5d5d5d;
          padding: 18px;
          margin-top: 18px;
          background-color: #ffffff;
          .header{
            @include font-dpr(28px);
            color: #3a3a3a;
          }
          .desContent{
            @include font-dpr(24px);
          }
        }
        .msgBtn{
          margin: 18px;
          line-height: 70px;
          @include font-dpr(28px);
          color: #333333;
          text-align: center;
          border: 1px solid #e1e1e1;
          border-radius: 10px;
          background-color: #ffffff;
        }
      }
    }
  }
</style>
